<div class="giveHeight"> 
    <table class="responsive dynamicTable display table table-bordered dataTable">
        <thead>        
            <tr>
{# sorting of properties based on query components #}
                    {{ knp_pagination_sortable(pagination, 'Réference', 'c.reference') }}
                    {{ knp_pagination_sortable(pagination, 'Désignation', 'c.designation') }}
                    <th>Code à bare</th>
                    <th>Famille</th>
                        <th>Taux Tva</th>
                        <th>Action</th>
                    </tr>
                </thead>

{# table body #}
{% for article in pagination %}
                <tr {% if loop.index is odd %}class="color"{% endif %}>
                    <td>{{ article.reference }}</td>
                    <td>{{ article.designation }}</td>
                    <td>{{ article.codeBarre }}</td>
                    <td>{{ article.famille }}</td>
                    <td>{{article.tauxTva}}</td>
                    <td class="center ">
                        <div class="controls center">
                            <a class="tip" href="javascript:editArticle('{{article.id}}')" oldtitle="Edit task" title="" aria-describedby="ui-tooltip-4">
                                <span class="icon12 icomoon-icon-pencil"></span>
                            </a>
                            {% if is_granted('ROLE_SUPER_ADMIN') %}
                            <a class="tip" href="javascript:removeArticle('{{article.id}}','{{article.designation}}')" oldtitle="Remove task" title="">
                                <span class="icon12 icomoon-icon-remove"></span>
                            </a>
                            {% endif %}
                        </div>
                    </td>
                </tr>
{% endfor %}
            </table>
        </div>
        <div id="DataTables_Table_0_info" class="dataTables_info">Affichage de {{ (pagination.getCurrentPageNumber -1)*pagination.getItemNumberPerPage + 1}} à {{ (pagination.getCurrentPageNumber -1)*pagination.getItemNumberPerPage + pagination.getItemNumberPerPage}} de {{ pagination.getTotalItemCount }} Familles article</div>
{# display navigation #}
        <div id="DataTables_Table_0_paginate" class="dataTables_paginate paging_full_numbers">
    {{ knp_pagination_render(pagination) }}
            </div>
            <div style="display: none" id="modal" title="Dialog Title" class="dialog">
                <input type="hidden" id="article_remove_id" value="" />
                <p>Voulez-vous vraiment placer <span id="text_libelle" style="font-weight: bold"></span> dans la corbeille ?</p></br>
                <ul id="list_sous_article_delete">

                </ul>
            </div>
            <script>
                function editArticle(id) {
                    $.ajax({
                        url: '{{path('gds_article_edit')}}',
                        data: 'id=' + id,
                        success: function(data) {
                            $('#div_article').html(data)
                        }
                    })
                }
                function removeArticle(id, libelle) {
                    $('#article_remove_id').val(id)
                    $('#modal').dialog({
                        autoOpen: false,
                        widht: 100,
                        modal: true,
                        dialogClass: 'dialog',
                        buttons: {
                            "Non": function() {
                                $(this).dialog("close");

                            },
                            "Oui": function(id) {
                                $.ajax({
                                    url: '{{path('gds_article_delete')}}',
                                    data: 'id=' + $('#article_remove_id').val(),
                                    success: function(data) {
                                        $('#div_article').html(data)

                                    }
                                })
                                $(this).dialog("close");
                                $(this).remove()
                            }
                        }
                    });
                    $('#ui-dialog-title-modal').html('Suppresion :' + libelle)
                    $('#text_libelle').html(libelle)
                    $('#modal').dialog('open');
                }
                </script>